<template>
  <!-- 首页最新 -->
  <div id="article">
    <el-card :body-style="{ padding: '5px',margin:'0px' }">
      <div class="article-item-box" v-if="blogs.length > 0">
        <div v-for="item in blogs" :key="item.id" style="width: auto;margin-bottom: 5px;">
          <div class="hot-box">
            <div class="hot-left">
              <el-image class="img" :src="item.cover"></el-image>
            </div>
            <div class="hot-right">
              <el-link class="title" :underline="false" @click.native="showDetail(item.id)">{{ item.title }}</el-link>
              <div class="content">{{ item.content }}</div>
            </div>
          </div>
          <el-divider></el-divider>
        </div>
        <div class="center-pagination">
          <el-pagination background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" :current-page="pagination.current" :page-sizes="[10, 20, 50, 100]"
            :page-size="pagination.size" :total="pagination.total">
          </el-pagination>
        </div>
      </div>
      <div v-else>
        <el-card :body-style="{ padding: '10px',margin:'10px',height:'650px' }">
          <el-empty description="暂无数据"></el-empty>
        </el-card>
      </div>
    </el-card>
  </div>
</template>

<script>
import {
    articlePageList
} from '@/api/article'

export default {
    name: 'my-article',
    data () {
        return {
            blogs: [],
            queryForm: {
                title: null,
                categaryId: null,
                current: 1,
                size: 10
            },
            pagination: {
                current: 1,
                size: 10,
                total: 0
            }
        }
    },
    methods: {
        showDetail (articleId) {
            this.$router.push({
                path: 'articleDetail',
                query: {
                    'articleId': articleId
                }
            })
        },
        // 查询
        onSubmit () {
            let params = {
                title: this.queryForm.title,
                categoryId: this.queryForm.categaryId,
                current: this.queryForm.current,
                size: this.queryForm.size
            }
            articlePageList(params).then((response) => {
                this.blogs = response.data.list
                this.pagination.total = response.data.total
                this.pagination.current = response.data.current
                this.pagination.size = response.data.size
            })
        },
        // 切换每页条数
        handleSizeChange (val) {
            console.log(val)
            this.queryForm.size = val
            let params = {
                title: this.queryForm.title,
                categoryId: this.queryForm.categaryId,
                current: this.queryForm.current,
                size: this.queryForm.size
            }
            articlePageList(params).then((response) => {
                this.blogs = response.data.list
                this.pagination.total = response.data.total
                this.pagination.current = response.data.current
                this.pagination.size = response.data.size
            })
        },
        // 切换页码
        handleCurrentChange (val) {
            console.log(val)
            this.queryForm.current = val
            let params = {
                title: this.queryForm.title,
                categoryId: this.queryForm.categaryId,
                current: this.queryForm.current,
                size: this.queryForm.size
            }
            articlePageList(params).then((response) => {
                this.blogs = response.data.list
                this.pagination.total = response.data.total
                this.pagination.current = response.data.current
                this.pagination.size = response.data.size
            })
        }
    },
    watch: {
        $route: {
            handler: function (val, oldVal) {
                var categoryId_ = val.query.categoryId
                this.queryForm.categaryId = categoryId_
                let params = {
                    title: this.queryForm.title,
                    categoryId: categoryId_,
                    current: this.queryForm.current,
                    size: this.queryForm.size
                }
                articlePageList(params).then((response) => {
                    this.blogs = response.data.list
                    this.pagination.total = response.data.total
                    this.pagination.current = response.data.current
                    this.pagination.size = response.data.size
                })
            },
            // 深度观察监听
            deep: true
        }
    },
    mounted () {

    },
    created () {
        let params = {
            title: this.queryForm.title,
            categoryId: this.queryForm.categaryId,
            current: this.queryForm.current,
            size: this.queryForm.size
        }
        articlePageList(params).then((response) => {
            this.blogs = response.data.list
            this.pagination.total = response.data.total
            this.pagination.current = response.data.current
            this.pagination.size = response.data.size
        })
    }
}
</script>

<style scoped>
/* 最外层div id选择器 */
#article {
  width: 100%;
  height: auto;
  margin-top: 0px;
  margin-bottom: 10px;
}

.search-keyword-div {
  padding: 10px;
}

.search-pre {
  font-size: 18px;
}

.keyword {
  font-size: 18px;
  color: red;
}

.article-item-box {
  width: 100%;
  height: auto;
  margin-top: 0px;
  margin-bottom: 10px;
}

.hot-box {
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-direction: row;
}

.hot-left {
  width: 199.5px;
  height: 100%;
  margin: 0px;
  padding: 0px;
}

.img {
  width: 199.5px;
  height: 134.27px;
  margin: 0px;
  padding: 0px;
}

.hot-right {
  width: calc(100% - 210px);
  height: 100%;
  padding: 0px 10px 0px 10px;
  margin: 0px;
  display: flex;
  flex-direction: column;
}

.title {
  font-size: 18px;
  font-weight: 600;
  height: 30px;
  line-height: 25px;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.content {
  font-size: 15px;
  height: 90px;
  line-height: 30px;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.el-divider--horizontal {
  margin: 0px;
}

.center-pagination {
  padding: 5px;
}
</style>
